import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import GenericTable from '../components/tables/GenericTable';
import { Tag, Switch } from 'antd';
import axios from 'axios';
import '../css/lzk.css';
import dayjs from 'dayjs';

axios.defaults.baseURL = 'http://localhost:3000/';

// 定义表格列配置
const columns = [
    {
        width: '6.1rem',
        align: 'center',
        title: '活动信息',
        key: '_id',
        render: (_, record) => (
            <div style={{ display: 'flex' }}>
                <img src={record.img} style={{ width: '2.5rem', height: '60px', marginTop: '0.1rem', borderRadius: '0.3rem' }} alt="" />
                <div style={{ marginTop: '0.3rem', marginLeft: '0.3rem' }}>{record.xin}</div>
            </div>
        )
    },
    {
        align: 'center',
        title: '活动状态',
        render: (_, record) => {
            let statusText;
            let statusColor;
            if (record.tid.value === '0') {
                statusText = '未开始';
                statusColor = '#3dd4a7';
            } else if (record.tid.value === '1') {
                statusText = '进行中';
                statusColor = '#0066ff';
            } else {
                statusText = '已结束';
                statusColor = '#fc2760';
            }
            return (
                <div style={{ display: 'flex' }}>
                    <div style={{ width: '0.3rem', height: '0.3rem', borderRadius: '0.5rem', backgroundColor: statusColor, margin: '0.08rem auto' }}></div>
                    <div style={{ color: statusColor }}>{statusText}</div>
                </div>
            );
        }
    },
    {
        align: 'center',
        title: '分类',
        render: (_, record) => (
            <span>{record.sid.value}</span>
        )
    },
    {
        align: 'center',
        title: '活动时间',
        key: '_id',
        render: (_, record) => (
            <div>
                <p>{dayjs(record.startTime).format('YYYY-MM-DD')}</p>
                <p>-</p>
                <p>{dayjs(record.endTime).format('YYYY-MM-DD')}</p>
            </div>
        )
    },
    {
        align: 'center',
        title: '活动地点',
        dataIndex: 'di',
        render: (text) => (
            <a>{text}</a>
        )
    },
    {
        align: 'center',
        title: '最后更新人',
        key: '_id',
        render: (_, record) => (
            <span>{record.name}</span>
        )
    },
    {
        width: '4rem',
        align: 'center',
        title: '最后更新时间',
        key: '_id',
        render: (_, record) => (
            dayjs(record.end_time).format('YYYY-MM-DD HH:mm:ss')
        )
    },
    {
        align: 'center',
        title: '操作',
        render: (_, record) => (
            <span>
                <a style={{ marginLeft: 16 }}>
                    报名信息
                </a>
                <a onClick={() => handleDelete(record._id)} style={{ marginLeft: 16 }}>
                    编辑
                </a>
                <a onClick={() => handleDelete(record._id)} style={{ marginLeft: 16, color: 'red' }}>
                    删除
                </a>
            </span>
        )
    },
];

// 处理邀请操作的函数
const handleInvite = (record) => {
    console.log(`Inviting ${record.name}`);
};

// 处理删除操作的函数
const handleDelete = async (id) => {
    console.log(`Deleting ${id}`);
    // await axios.get('/kai/deldynamic',{params: {id: id}})
};

const DataProvider = (props) => {
    return (
        <GenericTable
            columns={columns}
            dataSource={props.activelist}
            onInvite={handleInvite}
            onDelete={handleDelete}
        />
    );
};

export default DataProvider;